<template>
  <div class="work-detail" v-title :data-title="$t('router.workJazzTitle')">
    <div class="Breadcrumbback">
      <Breadcrumb></Breadcrumb>
    </div>
    <div class="main">
      <div class="box box-top">
        <li>
          {{ $t("main.classicalComposer") }}：
          <p v-if="detailInfo.fullName">
            <span
              v-text="
                $i18n.locale === 'zh'
                  ? detailInfo.fullCname || detailInfo.fullName
                  : detailInfo.fullName
              "
              :title="
                $i18n.locale === 'zh'
                  ? detailInfo.fullCname || detailInfo.fullName
                  : detailInfo.fullName
              "
            ></span>
          </p>
          <p v-else>
            <span v-text="$t('public.noInformation')"></span>
          </p>
        </li>
        <li>
          {{ $t("main.publisher") }}：
          <p>
            <span v-text="$t('public.noInformation')"></span>
          </p>
        </li>
        <li>
          {{ $t("main.worksName") }}：
          <p v-if="detailInfo.musicWorks">
            <span
              v-for="item of detailInfo.musicWorks"
              :key="item.workId"
              v-text="
                $i18n.locale === 'zh'
                  ? item.workCname || item.workName
                  : item.workName
              "
              :title="
                $i18n.locale === 'zh'
                  ? item.workCname || item.workName
                  : item.workName
              "
            ></span>
          </p>
          <p v-else>
            <span v-text="$t('public.noInformation')"></span>
          </p>
        </li>
        <li>
          {{ $t("main.duration") }}：
          <p>
            <span v-text="$t('public.noInformation')"></span>
          </p>
        </li>
        <li>
          {{ $t("main.creationAge") }}：
          <p v-if="detailInfo.musicWorks">
            <span
              v-for="item of detailInfo.musicWorks"
              :key="item.workId"
              v-text="item.yearComposed || $t('public.noInformation')"
              :title="item.yearComposed"
            ></span>
          </p>
          <p v-else>
            <span v-text="$t('public.noInformation')"></span>
          </p>
        </li>
        <li>
          {{ $t("search.period") }}：
          <p v-if="detailInfo.period">
            <span
              v-text="
                $i18n.locale === 'zh'
                  ? detailInfo.period.periodCname ||
                    detailInfo.period.periodName
                  : detailInfo.period.periodName
              "
              :title="
                $i18n.locale === 'zh'
                  ? detailInfo.period.periodCname ||
                    detailInfo.period.periodName
                  : detailInfo.period.periodName
              "
            ></span>
          </p>
          <p v-else>
            <span v-text="$t('public.noInformation')"></span>
          </p>
        </li>
        <li>
          {{ $t("search.musicalInstruments") }}：
          <p v-if="detailInfo.instrument">
            <span
              v-text="
                $i18n.locale === 'zh'
                  ? detailInfo.instrument.instrumentCname ||
                    detailInfo.instrument.instrumentName
                  : detailInfo.instrument.instrumentName
              "
              :title="
                $i18n.locale === 'zh'
                  ? detailInfo.instrument.instrumentCname ||
                    detailInfo.instrument.instrumentName
                  : detailInfo.instrument.instrumentName
              "
            ></span>
          </p>
          <p v-else>
            <span v-text="$t('public.noInformation')"></span>
          </p>
        </li>
      </div>
      <el-tabs class="box content" v-model="activeName">
        <!-- 专辑列表 -->
        <el-tab-pane :label="$t('main.albumList')" name="second">
          <el-table
            :size="isMobile ? 'mini' : 'medium'"
            :data="list"
            height="100%"
          >
            <el-table-column
              type="index"
              :label="$t('main.serialNumber')"
              min-width="50"
            ></el-table-column>
            <el-table-column
              :label="$t('main.albumNo')"
              min-width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p v-if="scope.row.catalogueId">
                  <span v-text="scope.row.catalogueId"></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('main.albumName')"
              min-width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  @click="toDetail(scope.row)"
                  class="pointer"
                  v-text="
                    $i18n.locale === 'zh'
                      ? scope.row.catalogueCname || scope.row.catalogueName
                      : scope.row.catalogueName
                  "
                ></span>
              </template>
            </el-table-column>
            <!-- 厂牌 -->
            <el-table-column
              :label="$t('public.brand')"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p
                  v-if="
                    scope.row.musicLabel && scope.row.musicLabel.displayName
                  "
                >
                  <span v-text="scope.row.musicLabel.displayName"></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('main.characteristicArtist')"
              min-width="150"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <p
                  v-if="
                    scope.row.artists.length > 0 &&
                    scope.row.artists[0].fullName
                  "
                >
                  <span
                    v-text="
                      $i18n.locale === 'zh'
                        ? scope.row.artists[0].fullCname ||
                          scope.row.artists[0].fullName
                        : scope.row.artists[0].fullName
                    "
                  ></span>
                </p>
                <p v-else>
                  <span v-text="$t('public.noInformation')"></span>
                </p>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb/Index";
export default {
  data() {
    return {
      activeName: "",
      detailInfo: {},
      list: [], //详情页数据
    };
  },
  components: {
    Breadcrumb,
  },
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getPersonWorkInfo();
    this.getWorkAlbumList();
  },
  methods: {
    async getPersonWorkInfo() {
      this.fullscreenLoading = true;
      try {
        let params = {
          personId: this.$route.params.personId,
          personTypeId: this.$route.params.personTypeId,
          workId: this.$route.params.workId,
        };
        let res = await this.$api.jazz.getPersonWorkInfo(params);
        if (res.code === 1000000) {
          this.detailInfo = res.source ? res.source : {};
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getWorkAlbumList() {
      this.fullscreenLoading = true;
      try {
        let params = {
          workId: this.$route.params.workId,
        };
        let res = await this.$api.jazz.getWorkAlbumList(params);
        if (res.code === 1000000) {
          this.list = res.source ? res.source : [];
          this.activeName = res.source.musicWorks ? "first" : "second";
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 点击跳转专辑详情页
    toDetail(item) {
      let params = {
        sort:
          item.moduleId == 516
            ? "classical"
            : item.moduleId == 518
            ? "national"
            : "jazz",
        id: item.catalogueId,
      };
      this.$router.push({
        name: this.isMobile ? "mJazzAlbumDetail" : "jazzAlbumDetail",
        params,
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
